<template>
	<view class="my-main">
		<!-- =============================================== 实占层 -->
		<!-- 帐号信息 -->
		<view>
			<view class="userTitle">用户信息</view>
			<view class="form">
				<!-- 用户信息表单 -->
				<view class="form-box">
					<u-form :model="userForm" ref="userForm">
						<!-- 姓名 -->
						<u-form-item
							required
							label="姓名" 
							prop="name"
							labelWidth="200"
						>
							<u-input 
								v-model="userForm.name" 
								placeholder="请输入姓名"
								input-align="right"
								:disabled="userInfo.realname"
								:custom-style="userInfo.realname ? inputCustomStyle : ''" 
							/>
						</u-form-item>
						<!-- 身份证号 -->
						<u-form-item
							required
							label="身份证号" 
							prop="idCard"
							labelWidth="200"
						>
							<u-input 
								v-model="userForm.idCard" 
								placeholder="请输入身份证号"
								input-align="right"
								:disabled="userInfo.IDcard"
								:custom-style="userInfo.realname ? inputCustomStyle : ''" 
							/>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		
		<view>
			<!-- 单位信息 -->
			<view class="userTitle">单位信息</view>
			<view class="form">
				<!-- 单位信息表单 -->
				<u-form :model="companyForm" ref="companyForm">
					<!-- 所属项目 -->
					<u-form-item
						required
						label="所属项目"
						labelWidth="200"
						rightIcon="arrow-right"
					>
						<u-input
							disabled
							v-model="companyForm.project" 
							placeholder="所属项目"
							input-align="right"
							@click="onClickCell('project')"
						/>
					</u-form-item>
					<!-- 工作单位 -->
					<u-form-item
						required
						label="工作单位"
						labelWidth="200"
						rightIcon="arrow-right"
					>
						<u-input
							disabled
							v-model="companyForm.company" 
							placeholder="工作单位"
							input-align="right"
							@click="onClickCell('company')"
						/>
					</u-form-item>
					<!-- 所在部门 -->
					<u-form-item
						label="所在部门"
						labelWidth="200"
					>
						<u-input
							v-model="companyForm.department" 
							placeholder="请输入所在部门"
							input-align="right"
						/>
					</u-form-item>
					<!-- 岗位（职务） -->
					<u-form-item
						label="岗位（职务）"
						labelWidth="200"
					>
						<u-input
							v-model="companyForm.userPost" 
							placeholder="请输入岗位（职务）"
							input-align="right"
						/>
					</u-form-item>
				</u-form>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submitBox">
			<view class="btn-tips" v-if="live_status == 0">{{startTime}}后可进入直播会场</view>
			<view class="btn-box">
				<u-button
					ripple
					type="primary"
					shape="circle"
					:hairLine="false"
					:customStyle="btnCustomStyle"
					@click="submitBtn"
				>
					{{btnText}}
				</u-button>
			</view>
		</view>
		
	</view>
</template>


<script>
	// 接口文件引入
	import request from '@/pagesB/common/js/request/userInfo.js';
	// 通用js文件引入
	import project from '@/common/js/public/project.js';
	
	export default {
		
		// 页面数据
		data() {
			return {
				live_status: 0,
				btnText: '',
				inputCustomStyle: {
					color: "#000"
				},
				// 自定义按钮样式
				btnCustomStyle: {
					width: '650rpx',
					height: '80rpx'
				},
				// 表单右图标样式
				rightIconStyle: {
					width: '20rpx',
					height: '40rpx'
				},
				// 用户表单数据
				userForm: {
					name: '', // 姓名
					idCard: '' // 身份证号
				},
				// 用户表单数据验证
				userFormRules: {
					name: [
						{
							min: 1,
							max: 10,
							required: true,
							message: '请确认姓名是否正确',
							trigger: ['change','blur']
						}
					],
					idCard: [
						{
							min: 16,
							max: 18,
							required: true,
							message: '请确认身份证号是否正确',
							trigger: ['change','blur']
						}
					]
				},
				// 单位信息表单数据
				companyForm: {
					project: '', // 所属项目
					company: '', // 工作单位
					department: '', // 所在部门
					userPost: ''//职位
				},
				
				// 临时缓存
				shortData: {
					/* id: 24146, // 用户id
					sentry_pid: 2, // 身份标识：1-管理人员  2-作业人员
					is_auth: 2, // 0-未实名 1-审核中 2-审核通过 3-审核失败 */
				},
				
				projectValue: '',
				workValue: '',

				// 用户信息总数据
				userInfo: {},
				
				// 列选择器
				select: {
					show: false,
				},
				isShow: false,
				//直播ID
				liveID: '',
				//IDcard
				userIdCard: '',
				startTime: '',
				userType: '',
				liveDetailsData: {}
			}
		},
		
		onReady() {
			this.$refs.userForm.setRules(this.userFormRules);
		},

		onLoad(options) {
			console.log(options)
			// 获取临时缓存信息
			this.liveDetailsData = options
			this.startTime = options.start_time
			this.liveID = options.id
			this.userType = options.live_status
			
			this.live_status = options.live_status;
			const title = this.live_status == 0 ? '参会登记' : '完善信息';
			uni.setNavigationBarTitle({ title });
			this.btnText = this.live_status == 0 ? '提交登记信息' : '提交并进入会议直播';
			
			// 请求我的信息总数据
			this.userInfoGetReq();
		},
		
		// 页面显示
		onShow() {
			
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			/**
			 * @description 获取用户信息
			 */
			userInfoGetReq () {
				request.userInfoGet({
					success: res => {
						this.userInfo = res.info;
						this.mobile = res.info.mobile2;
						this.userForm.name = res.info.realname;
						this.userForm.idCard = res.info.id_card2;
						this.companyForm.project = res.info.project;
						this.companyForm.company = res.info.company;
						this.companyForm.department = res.info.department;
					},
				});
			},
			
			/**
			 * @description 点击项
			 * @param {Object} type
			 */
			onClickCell (type) {
				const url = `/pagesB/pages/study/searchCheck/index?type=${type}&from=live`
				uni.navigateTo({
					url,
					events: {
						callback: data => {
							if(data.type === 'project') {
								this.companyForm.project = data.name
							}else if (data.type === 'company') {
								this.companyForm.company = data.name
							}
						}
					}
				})
			},
		

			submitLiveReq() {
				if(!this.userForm.name) {
					this.$u.toast('请检查姓名');
					return
				}
				if(!this.userForm.idCard) {
					this.$u.toast('请检查身份证号');
					return
				}
				if(!this.companyForm.project) {
					this.$u.toast('请检查项目');
					return
				}
				if(!this.companyForm.company) {
					this.$u.toast('请检查工作单位');
					return
				}
				request.submitLive({
					data: {
						live_plan_id: this.liveID, // 直播ID
						type: this.userType == 0 ? 1 : 2 , // 登记状态
						mobile: this.mobile,
						name: this.userForm.name, 
						id_card: this.userForm.idCard, 
						project_name: this.companyForm.project, 
						work_name: this.companyForm.company, 
						section_name: this.companyForm.department,
						post_name: this.companyForm.userPost
					},
					success: () => {
						uni.showToast({
							title: '提交申请成功',
							icon: 'success',
							duration: 1000,
							mask: true
						});
						// 延时返回上一页
						setTimeout(()=>{
							// 返回上一页
							// uni.navigateBack();
							uni.redirectTo({
							  url: `/pages/tabbar/study/live/details/index?liveID=${this.liveID}`
							});
							// uni.$focus.pageJump('/pages/tabbar/study/live/details/index',this.liveDetailsData);
						}, 1000);
					},
					fail: () => {
					uni.hideLoading();
          uni.showModal({
            title: "提示",
            content: "网络繁忙，请稍后再试",
            showCancel: false,
            confirmColor: "#1890FF",
          });
        },
				});
			},

			/**
			 * @description 提交按钮
			 */
			submitBtn() {
				this.submitLiveReq()
			},
		},
		
	}
</script>

<style lang="less" scoped>
	page{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}
	.my-main{
		width: 750rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.form{
			width: 710rpx;
			padding: 0 50rpx;
			background-color: #FFF;
		}
	}
	.userTitle{
		margin-top: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #F6F7F9;
		padding-bottom: 20rpx;
	}
	.form-box{
		background-color: #FFFFFF;
	}
	.userName{
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: -400;
		font-weight: 400;
		color: #aaaaaa;
		border-bottom: 1rpx solid #ccc;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.submitBox{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.btn-tips{
			font-size: 26rpx;
			margin-bottom: 40rpx;
			color: #7F7F7F;
		}
		
		.btn-box{
			width: 750rpx;
			height: 150rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
</style>